<template>
  <d-tabs
    v-model="vModels"
    type="slider"
    class="token-slider-tab g-custom-tab"
    @active-tab-change="handleTabChange"
  >
    <d-tab
      v-for="tab in tabsList"
      :key="tab.id"
      :id="tab.id"
    >
      <template v-slot:title>
        <span class="g-custom-tab-item">
          <GIcon :name="tab.id === modelValue ? tab.activeIcon : tab.icon" />
          <span
            class="g-custom-tab-title"
            :class="{ active: modelValue === tab.id }"
          >{{ tab.title }}</span>
        </span>
      </template>
    </d-tab>
  </d-tabs>
</template>
<script setup lang="ts">
import { useModel } from "@/utils/hooks/useModel";
import { ref } from "vue";
const props = withDefaults(
  defineProps<{
    disabled?: any;
    item?: object;
    readonly?: boolean;
    tabsList?: Array<object>;
    modelValue?: string | number;
  }>(),
  {}
);
const emit = defineEmits(["onTabChange", "update:modelValue"]);
const { vModels } = useModel(props, emit);

const handleTabChange = useDebounce((tab: any) => {
  emit("onTabChange", tab);
}, 100);
</script>

<style scoped lang="scss">
.token-slider-tab {
  .devui-tab__content {
    display: none;
  }
}
.g-custom-tab {
  flex-shrink: 0; // 设置成空间不足时也不会被挤压
  :deep(.devui-tabs__nav--slider>li:first-child) {
    border-left: 0;
  }
  &-title {
    font-size: 12px;
  }
  .g-custom-tab-item {
    color: #000;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  :deep(.devui-tabs__nav--slider>li a) {
    padding: 0 11px;
  }
}
</style>